<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
        <title> {{ venue }} | Band Together</title>
        <style type="text/css">
        </style>

        <link rel="Shortcut Icon" href="http://backup.physics.tamu.edu/media/bt.png" type="image/x-icon" >
        <script type="text/javascript" src="utils.js"></script>
		<script type="text/javascript" src="http://backup.physics.tamu.edu/media/jquery.tickertype.js"></script>
	<link rel="stylesheet" type="text/css" href="http://backup.physics.tamu.edu/media/index.css" >
	<link rel="stylesheet" type="text/css" href="http://backup.physics.tamu.edu/media/menu.css" >
	<link rel="stylesheet" type="text/css" href="http://backup.physics.tamu.edu/media/slider.css" >
	
	<!--For location popups-->
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="http://backup.physics.tamu.edu/media/popup.js" type="text/javascript"></script>
	<script type="text/javascript" src="utils.js"></script>
	<link rel="stylesheet" href="http://backup.physics.tamu.edu/media/general.css" type="text/css" media="screen" />
	<!--End of location popups-->
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	// create the cool book gallery effect
	$(function(){
    	//Get our elements for faster access and set overlay width
    	var div = $('div.slider'),
		ul = $('ul.slider'),
		// unordered list's left margin
		ulPadding = 15;

	//Get menu width
    	var divWidth = div.width();

    	//Remove scrollbars
    	div.css({overflow: 'hidden'});

    	//Find last image container
    	var lastLi = ul.find('li:last-child');

    	//When user move mouse over menu
    	div.mousemove(function(e){

	//As images are loaded ul width increases,
	//so we recalculate it each time
	var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

	var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
	div.scrollLeft(left);
	});
	});
	</script>

</head>

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

	var timeout     = 500;
	var closetimer  = 0;
	var ddmenuitem  = 0;

	function jsddm_open()
	{       jsddm_canceltimer();
        	jsddm_close();
        	ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

	function jsddm_close()
	{       if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

	function jsddm_timer()
	{       closetimer = window.setTimeout(jsddm_close, timeout);}

	function jsddm_canceltimer()
	{       if(closetimer)
        	{       window.clearTimeout(closetimer);
                	closetimer = null;}}

	$(document).ready(function()
	{       $('#jsddm > li').bind('mouseover', jsddm_open);
        	$('#jsddm > li').bind('mouseout',  jsddm_timer);});

	document.onclick = jsddm_close;

</script>

<!--change location -->
	<div id="popupContact">
		<p id="contactArea">
			<form action="" method="POST" name="locForm" onsubmit="return checkForm()">
				<label for="id_location">Enter your location:</label>
				<input type="text" name="locField" />
				<input type="submit" value="Submit" name="Submit"></input>
			</form>
		</p>
	</div>
<div id="backgroundPopup"></div>
<!-- done -->

<div class="main">
	<div class="header">
		<img src="http://backup.physics.tamu.edu/media/title.png" alt="Band Together" />
		<div class="slogan">
			<img src="http://backup.physics.tamu.edu/media/connect.png" alt="connect to local music" />
		</div>
		
		<ul id="jsddm">
			<li><a href="http://backup.physics.tamu.edu/bandtogether/">Home</a>
			</li>
			<li><a href="#">Find</a>
				<ul>
					<li><a href="http://backup.physics.tamu.edu/bandtogether/find/venue/">Venue</a></li>
					<li><a href="http://backup.physics.tamu.edu/bandtogether/find/artist/">Artists</a></li>
					<li><a href="http://backup.physics.tamu.edu/bandtogether/find/genre/">Genre</a></li>
				</ul>
       			</li>
            		<li id="button">Change Location</li>
			</li>
			<li id="bar">
				&nbsp;	
			</li>
            	</ul>

	</div>

	<br><br>	

	<h1 style="text-indent:1em;">{{ venue }}</h1>
	<div class="box">
		<!--{{ city }} -->
		<div style="overflow: hidden;" class="slider">
			<ul class="slider">
				{% for pic in venue_pics %}
				<li><img alt="{{ venue }}" src="http://backup.physics.tamu.edu/media/{{ pic }}"></li>
				{% endfor %}
			</ul>
		</div>
		
		<table border="0">
			<tr>
				<td style="padding: 0em 22em 1em 1em; vertical-align:text-top;">
					<h2>Hours</h2>
					Mon-Sat 4pm-2am<br>
					Sun 7pm-2am
					
				</td>
				<td style="padding: 0em 20em 1em 1em; vertical-align:text-top;"> 
					<h2>Location</h2>
					103 Boyett Street<br>
					College Station,TX <br>
					(979) 846-9214<br>
				</td>
			</tr>
		</table>
		
		<h2 style="text-indent:0.8em;">Upcoming Events</h2>
		{% for bandName, bandPic in popularBands %}
		<p style="text-indent:1.1em;"><img alt="{{ bandName }}" style="width: 5em; height: 5em;" src="http://backup.physics.tamu.edu/media/{{ bandPic }}"></p>
		<p style="text-indent:1.1em;">{{ bandName }}</p>
		{% endfor %}
		
		<table border="0">
			<tr>
				<td style="padding: 0em 0em 1em 1em; vertical-align:text-top;">
					<h3>Popular Bands at {{ venue }}</h3>
					<table>
						<tr>
							{% for bandName, bandPic in popularBands %}
							<td>
								<img alt="{{ bandName }}" style="width: 5em; height: 5em;" src="http://backup.physics.tamu.edu/media/{{ bandPic }}"><br>
								{{ bandName }}
							</td>
							{% endfor %}
						</tr>
					</table>
				</td>
				<td style="padding: 0em 0em 5em 1em; vertical-align:text-top;"> 
					<h3 style="">Popular Genres at {{ venue }}</h3>
					<table>
						<tr>
							{% for genreName, genrePic in popularGenres %}
							<td style="">
								<img alt="{{ genreName }}" style="width: 5em; height: 5em;" src="http://backup.physics.tamu.edu/media/{{ genrePic }}"><br>
								{{ genreName }}
							</td>
							{% endfor %}
						</tr>
					</table>

				</td>
			</tr>
		</table>
		
		
	</div>
	<p>
	<div class="footer" style="height:8em;">
		<table border="0" cellpadding="5">
			<tr>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/about/">About Us</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/faq/">FAQ</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/directory/artist">Artist directory</a></td>
			</tr>
			<tr>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/team/">Team</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/terms/">Terms of Use</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/directory/venue/">Venue directory</a></td>
			</tr>
			<tr>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/developer/">API</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/tour/">What is Band Together?</a></td>
			</tr>
		</table>
	<br>
	<img src="http://backup.physics.tamu.edu/media/bottomLogo.png" alt="Band Together" />
	</div>
</div>
</body>
</html>
